<template>
    <!--顶部搜索栏  组件-->
    <el-row type="flex" justify="center" :gutter="10" class="search_line_height">
        <!--logo-->
        <el-col :span="2">
<!--            <el-image class="logo" :src="require('../../assets/images/logo.png')" :fit='logoFit'></el-image>-->
            <a href="/"><el-image class="logo" :src="require('../../assets/images/logo.png')" :fit='logoFit'></el-image></a>
            <!--                <img src="../assets/images/logo.png">-->
        </el-col>
        <el-col :span="10" >
            <el-input v-model="search" placeholder="请输入内容" v-on:change="doSearch(1)"></el-input>
<!--            <el-input v-model="search" placeholder="请输入内容"></el-input>-->
        </el-col>
        <el-col :span="8">
            <el-button type="primary" size="medium" v-on:click="doSearch(1)">搜帖子</el-button>
            <el-button size="medium" @click="doSearch(2)">搜贴吧</el-button>
            <el-button size="medium" @click="doSearch(3)">搜用户</el-button>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "searchBar",
        data(){
            return{
                logoFit:'contain',  /*搜索框处左边logo 适应容器的方式*/
                search: '',  /*搜索框内容*/
            }
        },
        props: ["word"],
        created(){
            if (this.word !== '' && this.word != null)
                this.search = this.word; //初始化 搜索关键字
        },
        methods: {
            // 参数type表示搜索类型 （1：帖子；2：贴吧；3：用户）
            doSearch(type){
                let routeUrl = this.$router.resolve({
                    path: "/searchResult",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    query: {type: type, searchWord: this.search},  //通过 query（params不行） 传参   在目标页面通过 this.$route.query.type 来接收参数
                });

                //在当前页打开
                window.open(routeUrl.href, "_self");
            }
        },
        components:{

        }
    }
</script>

<style scoped>
    /*把搜索栏的高度统一设置为logo高度 */
    .search_line_height{
        line-height: 70px;
        height: 85px;
    }
    /*搜索栏的logo(论)*/
    .logo{
        width: 100px;
        height: 70px;
    }
</style>